<template>
  <div :class="{ open: isSort }" @click.self="hideView">
    <!-- 推荐商家导航 -->
    <div v-if="filterData" class="filter_wrap">
      <aside class="filter">
        <div
          class="filter-nav"
          v-for="(item, index) in filterData.navTab"
          :key="index"
          :class="{ 'filter-bold': currentFilter === index }"
          @click="filterSort(index)"
        >
          <span>{{ item.name }}</span>
          <i v-if="item.icon" :class="`fa fa-${item.icon}`"></i>
        </div>
      </aside>
    </div>
    <!-- 商家排序 -->
    <section v-if="isSort" class="filter-extend">
      <ul>
        <li
          @click="selectScreen(item, index)"
          v-for="(item, index) in filterData.sortBy"
          :key="index"
        >
          <span :class="{ selectName: currentSort === index }">{{
            item.name
          }}</span>
          <i v-show="currentSort === index" class="fa fa-check"></i>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: "FilterView",
  props: {
    filterData: Object,
  },
  data() {
    return {
      currentFilter: 0,
      isSort: false,
      currentSort: 0,
    };
  },
  methods: {
    filterSort(index) {
      this.currentFilter = index;
      switch (index) {
        case 0:
          this.isSort = true;
          this.$emit("searchFixed", true);
          break;
        case 1:
          // 更新数据：选择 距离最近 一样要通知父组件
          this.$emit("update", {
            condition: this.filterData.navTab[1].condition,
          });
          this.hideView();
          break;
        case 2:
          // 更新数据：选择 品质优盟 一样要通知父组件
          this.$emit("update", {
            condition: this.filterData.navTab[2].condition,
          });
          this.hideView();
          break;
        default:
          // this.isSort = false;
          // this.$emit("searchFixed", false);
          this.hideView();
          break;
      }
    },
    hideView() {
      this.isSort = false;
      this.$emit("searchFixed", false);
    },
    selectScreen(item, index) {
      this.currentSort = index;
      this.filterData.navTab[0].name = this.filterData.sortBy[index].name;
      this.hideView();

      // 更新数据：通知父组件按照当前选择的排序方式
      this.$emit("update", { condition: item.code });
    },
  },
};
</script>

<style scoped>
.filter_wrap {
  position: sticky;
  top: 54px;
  z-index: 10;
  background: #fff;
}
.filter {
  position: relative;
  border-bottom: 1px solid #ddd;
  line-height: 10.4vw;
  z-index: 101;
  height: 10.666667vw;
  display: flex;
  justify-content: space-around;
}
.filter-nav {
  flex: 1;
  text-align: center;
  color: #666;
  font-size: 0.8333rem;
}
.filter-nav i {
  width: 1.6vw;
  height: 0.8vw;
  margin-left: 1.333333vw;
  margin-bottom: 0.533333vw;
  fill: #333;
  will-change: transform;
}
.filter-bold {
  font-weight: 600;
  color: #333;
}
.open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
  z-index: 3;
}
.filter-extend {
  background-color: #fff;
  color: #333;
  padding-top: 2.133333vw;
  position: absolute;
  width: 100%;
  z-index: 4;
  left: 0;
  top: 24.533333vw;
}
.filter-extend li {
  position: relative;
  padding-left: 5.333333vw;
  line-height: 10.666667vw;
  overflow: hidden;
}
.fa-check {
  float: right;
  color: #009eef;
  margin-right: 3.733333vw;
  line-height: 10.666667vw;
}
.selectName {
  color: #009eef;
}
</style>